<template>
  <jf-navigation background="#ffffff" @getHeight="getNavigationHeight">
    <view>{{ $t('index.attention.navigation') }}</view>
  </jf-navigation>
  <jf-interest
    :list="data.list"
    :loading="data.loading"
    :loadEnd="data.loadEnd"
    :loadError="data.loadError"
    :total="data.total"
    :column="1"
    :loadEndText="$t('common.load.notMore')"
    :loadErrorText="$t('common.load.error')"
    :loadNoneText="$t('common.load.none')"
    @load="getList()"
  >
    <template #scope="{ item }">
      <jf-interestInternal :item="item" size="large"></jf-interestInternal>
    </template>
  </jf-interest>
</template>

<script lang="ts" setup>
import { reactive, onMounted, watch } from 'vue'
import { listArticle } from '@/api/article'

const props = withDefaults(
  defineProps<{
    reachBottom: boolean
  }>(),
  {
    reachBottom: false,
  }
)
const emits = defineEmits<{
  (e: 'update:reachBottom', value: boolean): void
}>()
const data = reactive({
  navigationHeight: 0,
  currentIndex: 0,
  list: [],
  total: 0,
  loading: false,
  loadEnd: false,
  loadError: false,
})
const queryParams = reactive({
  page: 1,
  limit: 10,
  is_sub: 1,
})

const getNavigationHeight = (height: number): void => {
  data.navigationHeight = height
}
const getList = (init?: boolean): void => {
  if (init) {
    queryParams.page = 1
    data.total = 0
    data.list = []
    data.loadEnd = false
    data.loadError = false
    data.loading = false
  }
  if (data.loadEnd || data.loading) {
    emits('update:reachBottom', false)
    return
  }
  data.loading = true
  data.loadEnd = false
  data.loadError = false
  listArticle(queryParams)
    .then((res: any) => {
      data.total = res.data.count
      data.list = data.list.concat(res.data.list)
      if (queryParams.page * queryParams.limit > data.total) {
        data.loadEnd = true
      }
      queryParams.page += 1
      emits('update:reachBottom', false)
    })
    .catch(() => {
      data.loadError = true
      emits('update:reachBottom', false)
    })
    .finally((): void => {
      data.loading = false
    })
}

onMounted(() => {
  getList()
})
watch(
  () => props.reachBottom,
  (nVal: boolean): void => {
    if (nVal) getList()
  },
  {
    deep: true,
  }
)
</script>

<style lang="scss"></style>
